<template>
  <div class="entrust">
    <div class="banner">
      <div class="container-1200" style="position: relative">
        <div class="entrust-search flex flex-fd-c flex-ai-c">
          <div class="mb-36" style="font-size: 20px">
            提交申请，免费委托找房
          </div>
          <div class="mb-36">
            <el-input placeholder="请输入手机号" type="number" v-model="searchVal" :maxlength="11" oninput="if(value.length > 11) value=value.slice(0, 11)" class="search-input">
              <el-button class="search-btn" slot="append" @click="tapAppointment">预约带看</el-button>
            </el-input>
          </div>
          <div style="color: #666">
            已有<span class="number-tag" v-for="(item, index) in numArr" :key="index">{{ item }}</span
            >人提交了委托申请
          </div>
        </div>
      </div>
    </div>
    <div class="service-business"></div>
    <div class="commitment"></div>
  </div>
</template>

<script>
import { postApiHouseEntrustLookHouse, getApiEntrustNumber } from '@/api'
import { Message } from 'element-ui'
export default {
  data() {
    return {
      searchVal: '',
      user_id: null,
      numArr: []
    }
  },
  created() {
    this.getEntrustNumber()
  },
  methods: {
    getEntrustNumber() {
      const id = localStorage.getItem('id')
      if (!id) {
        this.$router.push('login')
      } else {
        this.user_id = id
      }
      getApiEntrustNumber().then((res) => {
        if (res.code === 200) {
          this.numArr = (res.data.entrust + '').split('')
        } else {
          this.numArr = ['0']
        }
      })
    },
    tapAppointment() {
      postApiHouseEntrustLookHouse({
        user_id: this.user_id,
        phone: this.searchVal
      }).then((res) => {
        if (res.code === 200) {
          Message.success(res.msg)
          this.getEntrustNumber()
          this.searchVal = ''
        } else {
          Message.warning(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.entrust {
  .mb-36 {
    margin-bottom: 36px;
  }
  .banner {
    width: 100%;
    min-width: 1200px;
    height: 782px;
    background-image: url(~@/assets/images/entrust_banner.png);
    background-repeat: no-repeat;
    background-position: center;
    .entrust-search {
      padding-top: 36px;
      width: 704px;
      height: 242px;
      border-radius: 10px;
      background-color: white;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 96%);
      .number-tag {
        width: 26px;
        height: 38px;
        border-radius: 6px;
        box-sizing: border-box;
        display: inline-block;
        line-height: 38px;
        text-align: center;
        border: 1px solid #e5e5e5;
        box-shadow: 0 4px 0 #ededed;
        margin: 0 2px;
      }
    }
  }
  .search-input {
    width: 470px;

    /deep/ .el-input__inner {
      background-image: url(~@/assets/images/icon-search.png);
      background-size: 16px;
      background-repeat: no-repeat;
      background-position: 10px 10px;
      padding-left: 36px;
    }
    /deep/ .el-input-group__append {
      border: 1px solid #c7343c;
      .search-btn {
        width: 140px;
        background-color: #c7343c;
        border: none;
        color: white;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
  .service-business {
    height: 428px;
    background-image: url(~@/assets/images/service_business.png);
    background-repeat: no-repeat;
    background-position: center;
  }
  .commitment {
    height: 548px;
    background-image: url(~@/assets/images/commitment.png);
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>
